<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="50%" :title="`${drawerProps.title}专辑`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.rowData"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="drawerProps.rowData.title" placeholder="专辑标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="drawerProps.rowData.type" clearable style="width: 180px;" @change="handleTypeChange">
          <el-option v-for="item in fileTypeEnum" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="tag">
        <el-select v-model="drawerProps.rowData.tag" clearable style="width: 180px;">
          <el-option v-for="item in drawerProps.albumTags" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" :rows="3" v-model="drawerProps.rowData.description" placeholder="专辑描述" clearable />
      </el-form-item>
      <el-form-item :label="drawerProps.rowData.type == 3 ? '文档' : drawerProps.rowData.type == 2 ? '视频' : '图片'" prop="files">
        <template v-if="drawerProps.rowData.type == 3">
          <UploadFiles
              v-model:file-list="drawerProps.rowData.files"
              width="80px"
              height="80px"
              :file-size="10"
              :limit="10"
              :file-type="documentTypes"
          >
            <template #empty>
              <el-icon><Plus /></el-icon>
              <span>上传专辑文档</span>
            </template>
            <template #tip> 文档大小不能超过 10M </template>
          </UploadFiles>
        </template>
        <template v-else-if="drawerProps.rowData.type == 2">
          <UploadFile v-model:imageUrl="drawerProps.rowData.files[0].url" width="80px" height="80px"
                      :file-size="50" :file-type="videoTypes" :api="uploadMultipartApi">
            <template #empty>
              <el-icon><Plus /></el-icon>
              <span>上传视频</span>
            </template>
            <template #tip> 视频大小不能超过 50M </template>
          </UploadFile>
        </template>
        <template v-else>
          <UploadFiles
              v-model:file-list="drawerProps.rowData.files"
              width="80px"
              height="80px"
              :file-size="5"
              :limit="15"
          >
            <template #empty>
              <el-icon><Plus /></el-icon>
              <span>上传专辑图片</span>
            </template>
            <template #tip> 图片大小不能超过 5M </template>
          </UploadFiles>
        </template>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="drawerProps.rowData.sort" :min="0" placeholder="请输入排序" style="width:180px" clearable />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="drawerProps.rowData.status">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage, FormInstance} from "element-plus";
import UploadFile from "@/components/Upload/Img.vue";
import UploadFiles from "@/components/Upload/Imgs.vue";
import {Plus} from "@element-plus/icons-vue";
import {Recordable} from "@/interface/types.ts";
import {documentMimeTypeEnum, fileTypeEnum, videoMimeTypeEnum} from "@/config/enums/serviceDict.ts";
import {File} from "@/interface/namespace.ts";
import {captureFirstFrame} from "@/helper";
import {uploadMultipartApi} from "@/api/modules/file.ts";

const rules = reactive<Recordable>({
  title: [{ required: true, message: "请输入专辑标题" }],
  type: [{ required: true, message: "请选择专辑类型" }],
  tag: [{ required: true, message: "请选择专辑标签" }],
  files: [{ required: true, message: "请上传专辑内容" }],
  status: [{ required: true, message: "专辑状态不能为空" }],
});

const documentTypes = documentMimeTypeEnum.map(item => item.value) as File.DocumentMimeType[];
const videoTypes = videoMimeTypeEnum.map(item => item.value) as File.AudioMimeType[];

interface DrawerProps {
  title: string;
  isView: boolean;
  albumTags: any[];
  rowData?: any;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  albumTags: [],
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  if (!drawerProps.value.rowData.files) {
    if (drawerProps.value.rowData.type == 2) {
      drawerProps.value.rowData.files = [{ url: "", name: "", size: 0 }];
    } else {
      drawerProps.value.rowData.files = [];
    }
  }
  drawerVisible.value = true;
};

const handleTypeChange = (value: number) => {
  if (value == 2 && (!drawerProps.value.rowData.files || drawerProps.value.rowData.files.length == 0)) {
    drawerProps.value.rowData.files = [{ url: "", name: "", size: 0 }];
  } else {
    drawerProps.value.rowData.files = drawerProps.value.rowData.files.filter(item => item.url != "");
  }
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      if (drawerProps.value.rowData.type == 1) {
        drawerProps.value.rowData.preview = drawerProps.value.rowData.files[0].url;
      } else if (drawerProps.value.rowData.type == 2 && !drawerProps.value.rowData.preview) {
        drawerProps.value.rowData.preview = await captureFirstFrame(drawerProps.value.rowData.files[0].url);
        drawerProps.value.rowData.previewSuffix = "png";
        drawerProps.value.rowData.is_base64 = true;
      }
      drawerProps.value.rowData.files.forEach(item => {
        item.storage_type = 4;
        item.type = drawerProps.value.rowData.type;
      })
      await drawerProps.value.api!(drawerProps.value.rowData);
      ElMessage.success({ message: `${drawerProps.value.title}专辑成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
